<template>
    <Form ref="form" :model="form" :rules="ruleValidate" label-position="left" :label-width="100">

        <FormItem label="类型" prop="classification">
            <Select v-model="form.classification" placeholder="请选择类型">
                <Option v-for="(item,index) in classList" :value="item.value" :key="index">{{ item.label }}</Option>
            </Select>
        </FormItem>

        <FormItem label="最低分" prop="lowest_score">
            <InputNumber v-model="form.lowest_score"></InputNumber>
        </FormItem>

        <FormItem label="最高分" prop="highest_score">
            <InputNumber v-model="form.highest_score"></InputNumber>
        </FormItem>

        <FormItem label="固定分" prop="fixed_score">
            <InputNumber :min="0" v-model="form.fixed_score"></InputNumber>
        </FormItem>

        <FormItem label="细则内容" prop="entry_content.zh">
            <Input v-model="form.entry_content.zh" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="输入细则内容"></Input>
        </FormItem>

        <FormItem label="说明" prop="remarks.zh">
            <Input v-model="form.remarks.zh" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="输入说明"></Input>            
        </FormItem> 

        <FormItem>
            <Button type="primary" :loading="btnload" @click="handleSubmit('form')">{{ condition?'修改':'添加' }}</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props: {
        condition: {
            type: [Boolean, Number],
            default: false
        }
    },
    data () {
        return {
            btnload: false,
            form:{
                classification: 1,
                lowest_score: null,
                highest_score: null,
                fixed_score: null,
                entry_content: {
                    zh: null,
                    mn: null,
                    en: null,
                },
                remarks: {
                    zh: null,
                    mn: null,
                    en: null,
                }
            },
            addurl: 'api/watchlist/v1/phoneticbeautytrules/add',
            editurl: 'api/watchlist/v1/phoneticbeautytrules/edit/' + this.condition,
            selUrl: 'api/watchlist/v1/phoneticbeautytrules/find/' + this.condition,

            classList: [
                { label: '加分', value: 1 },
                { label: '减分', value: 2 },
            ],
            
            ruleValidate: {
                'entry_content.zh': [
                    { required: true, message: '请输入细则内容', trigger: 'blur' }
                ],
                classification: [
                    { required: true, type: 'number', message: '请选择类型', trigger: 'change' }
                ],
            },
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.btnload = true
                    if (this.condition) {
                        this.editSubmit ()
                    } else {
                        this.addSubmit ()
                    }
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit () {
            this.$http.post(this.addurl, this.form).then(val=>{
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 执行修改数据
         * 
         ************************************************************/
        editSubmit () {
            this.$http.put(this.editurl, this.form).then(val=>{
                this.btnload = false
                this.$emit('requery',true)
            }).catch(err => {
                this.btnload = false 
            })
        },
        
        /************************************************************
         * 
         * 单条数据查询（修改）
         * 
         ************************************************************/
        selData () {
            this.$http.get(this.selUrl).then(val=>{
                let data = val.data
                this.form.classification = parseInt(data.classification)
                this.form.entry_content = data.entry_content
                this.form.remarks = data.remarks
                this.form.highest_score = data.highest_score
                this.form.lowest_score = data.lowest_score
                this.form.fixed_score = data.fixed_score
            }).catch(err => {
            })
        }
    },
    created () {
        if (this.condition) this.selData ()
    },
}
</script>